<template>
  <div style=" width: 97%; margin: auto;">
    <el-row style="margin-top: 20px;">
      <el-col :span="16">
        <h3>本年度会议及换届情况</h3>
      </el-col>
    </el-row>
    <el-form :model="yearlyMeetingAddRequest" ref="yearlyMeetingAddRequestRef" size="default" :rules="meetRules"
      label-width="160px">
      <el-row :gutter="20">
        <el-col style="margin-bottom: 15px;" :span="23">
          <span style="font-size: 16px;font-weight: bold;line-height: 36px;">章程规定</span>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="memberRepresentativeInterval" label="会员代表大会或理事会届期（年）">
            <el-input type="number" placeholder="请输入" v-model="yearlyMeetingAddRequest.memberRepresentativeInterval">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="memberMeetingInterval" label="会员（代表）大会多几年一次">
            <el-input type="number" placeholder="请输入" v-model="yearlyMeetingAddRequest.memberMeetingInterval">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7" style="margin-bottom: 15px;">
          <el-form-item prop="directorMeetingInterval" label="理事会">
            <el-input type="number" placeholder="请输入" v-model="yearlyMeetingAddRequest.directorMeetingInterval">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="1" style="text-align: center;padding-top: 6px;margin-bottom: 15px;font-size: 14px;">年</el-col>
        <el-col :span="3" style="margin-bottom: 15px;">
          <el-form-item prop="yearlyDirectorMeetingCount" label-width="0px">
            <el-input type="number" placeholder="请输入" v-model="yearlyMeetingAddRequest.yearlyDirectorMeetingCount">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="1" style="text-align: center;padding-top: 6px;margin-bottom: 15px;font-size: 14px;">次</el-col>

        <el-col :span="7" style="margin-bottom: 15px;">
          <el-form-item prop="executiveDirectorMeetingInterval" label="常务理事会">
            <el-input type="number" placeholder="请输入"
              v-model="yearlyMeetingAddRequest.executiveDirectorMeetingInterval">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="1" style="text-align: center;padding-top: 6px;margin-bottom: 15px;font-size: 14px;">年</el-col>
        <el-col :span="3" style="margin-bottom: 15px;">
          <el-form-item prop="yearlyExecutiveDirectorMeetingCount" label-width="0px">
            <el-input type="number" placeholder="请输入"
              v-model="yearlyMeetingAddRequest.yearlyExecutiveDirectorMeetingCount">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="1" style="text-align: center;padding-top: 6px;margin-bottom: 15px;font-size: 14px;">次</el-col>

        <el-col style="margin-bottom: 15px;" :span="23">
          <span style="font-size: 16px;font-weight: bold;line-height: 36px;">换届或会议情况</span>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="recentlyChangeTenureTime" label="最近一次已召开的换届大会时间">
            <el-date-picker v-model="yearlyMeetingAddRequest.recentlyChangeTenureTime" type="date" style="width: 100%;"
              value-format="YYYY-MM-DD" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="recentlyChangeMeetingFormat" label="会议召开方式">
            <el-input v-model="yearlyMeetingAddRequest.recentlyChangeMeetingFormat" placeholder="请输入">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="recentlyMemberMeetingTime" label="最近一次已召开的会员（代表）大会时间">
            <el-date-picker v-model="yearlyMeetingAddRequest.recentlyMemberMeetingTime" type="date" style="width: 100%;"
              value-format="YYYY-MM-DD" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="recentlyMemberMeetingFormat" label="会议召开方式">
            <el-input v-model="yearlyMeetingAddRequest.recentlyMemberMeetingFormat" placeholder="请输入">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="thenDirectorMeetingCount" label="本年度召开理事会次数">
            <el-input placeholder="请输入" type="number" v-model="yearlyMeetingAddRequest.thenDirectorMeetingCount">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="yearlyDirectorMeetingFormat" label="会议召开方式">
            <el-input v-model="yearlyMeetingAddRequest.yearlyDirectorMeetingFormat" placeholder="请输入">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="thenExecutiveDirectorMeetingCount" label="本年度召开常务理事会次数">
            <el-input placeholder="请输入" type="number"
              v-model="yearlyMeetingAddRequest.thenExecutiveDirectorMeetingCount">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="yearlyExecutiveMeetingFormat" label="会议召开方式">
            <el-input v-model="yearlyMeetingAddRequest.yearlyExecutiveMeetingFormat" placeholder="请输入">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="23">
          <span style="font-size: 16px;font-weight: bold;line-height: 36px;">其他信息</span>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="failureDirectorMeeting" label="未如期召开理事会的原因">
            <el-input v-model="yearlyMeetingAddRequest.failureDirectorMeeting" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="failureExecutiveDirectorMeeting" label="未如期召开常务理事会的原因">
            <el-input v-model="yearlyMeetingAddRequest.failureExecutiveDirectorMeeting" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="failureChangeTenure" label="未如期召开换届的原因">
            <el-input v-model="yearlyMeetingAddRequest.failureChangeTenure" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="applyExtension" label="是否申请延期换届">

            <el-radio-group v-model="yearlyMeetingAddRequest.applyExtension" size="default">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="extensionTime" label="延期换届日期">
            <el-date-picker v-model="yearlyMeetingAddRequest.extensionTime" type="date"
              :disabled="yearlyMeetingAddRequest.applyExtension == 2" style="width: 100%;" value-format="YYYY-MM-DD"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 15px;" :span="12">
          <el-form-item prop="capproveTime" label="登记机关批准延期换届的日期">
            <el-date-picker :disabled="yearlyMeetingAddRequest.applyExtension == 2" style="width: 100%;"
              v-model="yearlyMeetingAddRequest.capproveTime" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { getDictByCode, getTableInfoByPage, stSaveMeeting } from '@/views/yearCheck/ykb/st/st'

export default {
  data() {
    return {
      sexOptions: [{ id: '1', name: '男' }, { id: '2', name: '女' }],
      shiOptions: [{ id: '1', name: '是' }, { id: '2', name: '否' }],
      handleOptions: undefined,
      yearlyMeetingAddRequest: {
        applyExtension: '',//是否申请延期换届1-是，2-不是 0-未知
        capproveTime: '',//($date-time)登记机关批准时间
        creditCode: localStorage.getItem('creditCode'),//统一社会信用代码
        directorMeetingInterval: '', //
        examineYear: localStorage.getItem('examineYear'),//审查年度
        executiveDirectorMeetingInterval: '',
        extensionTime: '',//($date-time)延期换届时间
        failureChangeTenure: '',//未如期召开换届的原因
        failureDirectorMeeting: '',//未如期召开理事会的原因
        failureExecutiveDirectorMeeting: '',//未如期召开常务理事会的原因
        id: '',//
        memberMeetingInterval: '',//会员大会时间间隔
        memberRepresentativeInterval: '',//会员代表大会时间间隔
        organizationBaseId: '',//社团组织id
        recentlyChangeTenureTime: '',//($date-time)最近一次召开换届时间
        recentlyMemberMeetingTime: '',//($date-time)最近一次召开会员大会时间
        yearlyDirectorMeetingCount: '',//年度理事会次数
        yearlyExecutiveDirectorMeetingCount: '',//年度常务理事会次数
        yearlyExecutiveMeetingFormat: '',//最近一次召开换届会议召开方式
        yearlyDirectorMeetingFormat: '',//年度理事会议召开方式
        recentlyMemberMeetingFormat: '',//最近一次召开会员会议召开方式
        recentlyChangeMeetingFormat: '',//年度常务理事会议召开方式
        thenDirectorMeetingCount: '',//本年度召开理事会次数
        thenExecutiveDirectorMeetingCount: ''//本年度召开常务理事会次数
      },
      meetRules: {
        memberRepresentativeInterval: [{ required: true, message: '请完善', trigger: 'blur' }],
        recentlyChangeTenureTime: [{ required: true, message: '请选择', trigger: 'blur' }],
        recentlyChangeMeetingFormat: [{ required: true, message: '请完善', trigger: 'blur' }],
        memberMeetingInterval: [{ required: true, message: '请完善', trigger: 'blur' }],
        recentlyMemberMeetingTime: [{ required: true, message: '请选择', trigger: 'blur' }],
        recentlyMemberMeetingFormat: [{ required: true, message: '请完善', trigger: 'blur' }],
        directorMeetingInterval: [{ required: true, message: '请完善', trigger: 'blur' }],
        yearlyDirectorMeetingCount: [{ required: true, message: '请完善', trigger: 'blur' }],
        thenDirectorMeetingCount: [{ required: true, message: '请完善', trigger: 'blur' }],
        yearlyDirectorMeetingFormat: [{ required: true, message: '请完善', trigger: 'blur' }],
        executiveDirectorMeetingInterval: [{ required: true, message: '请完善', trigger: 'blur' }],
        yearlyExecutiveDirectorMeetingCount: [{ required: true, message: '请完善', trigger: 'blur' }],
        thenExecutiveDirectorMeetingCount: [{ required: true, message: '请完善', trigger: 'blur' }],
        yearlyExecutiveMeetingFormat: [{ required: true, message: '请完善', trigger: 'blur' }],
        applyExtension: [{ required: true, message: '请选择', trigger: 'blur' }]

      }
    }
  },
  created() {

  },
  methods: {
    postInfo() {
      this.yearlyMeetingAddRequest.creditCode = localStorage.getItem('creditCode')
      this.yearlyMeetingAddRequest.examineYear = localStorage.getItem('examineYear')
      this.$refs.yearlyMeetingAddRequestRef.validate(valid => {
        if (valid) {
          stSaveMeeting(this.yearlyMeetingAddRequest).then(response => {
            this.$message({
              message: '本年度会议及换届情况保存成功',
              type: 'success'
            })
            this.getInfo()
          })
        } else {
          this.$message({
            message: '请填写完整',
            type: 'error'
          })
        }
      })

    },
    getInfo() {
      getTableInfoByPage(3).then(response => {
        this.yearlyMeetingAddRequest = response.data.yearlyMeetingAddRequest
      })
      getDictByCode('handle').then(response => {
        this.handleOptions = response.data
      })
    }
  }
}
</script>
<style scoped lang="scss">
:deep(.el-radio) {
  display: inline-flex;
}

.el-table {
  --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  --el-table-border-color: #e0e5f0;
}

:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}

.app-container {
  margin-top: 40px;
  margin-left: 15%;
  width: 70%;
}

.div-bg {
  width: 100%;
  background: #F0F0F0;
  height: 10px;
}

.box-card {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
}

.el-col {
  padding-left: 5px;
}

.divider-title {
  font-weight: bold;
  font-size: 18px;
}

.custom-select .el-select-dropdown {
  max-height: 600px;
  /* 设置为你想要的高度 */
  overflow: auto;
  /* 添加滚动条 */
}

table {
  border-collapse: collapse;
  /* 确保表格的边框合并为单一边框 */
  width: 100%;
  /* 表格宽度 */
}

td {
  border: 1px solid #ababab;
  /* 设置单线边框 */
  padding: 6px;
  /* 单元格内边距 */
}

.el-form-item {
  margin-bottom: 0px;
}

:deep(.el-form-item__label) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
  height: 32px;
  line-height: 16px;
}
</style>
